<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			关系选择器：
			例子：E元素   F元素
			(1)后代选择器：
			E F{ }
			(2)子代选择器
			E>F{ }
			(3)相邻选择器
			E+F{ }
			(3)兄弟选择器
			E~F{ }
			
		-->
		<style type="text/css">
			ul>li{
				width: 80px;
				list-style: none;
				float: left;
				border-right: 1px solid #ccc;
				text-align: center;
				background-color: pink;
				cursor: pointer;
			}
			ul>li dl{
				display: none;
				background-color: paleturquoise;
				
			}
			ul>li:hover dl{
				display: block;
			}
		</style>
		<ul>
			<li>
				文字1
				<dl>
					<li>HTML5</li>
					<li>CSS3</li>
					<li>JavaScript</li>
				</dl>
			</li>
			<li>文字2</li>
			<li>文字3</li>
			<li>文字4</li>
			<li>文字5</li>
		</ul>
		
		<style type="text/css">
			input[type="checkbox"]{
				display: none;
			}
			input[type="checkbox"]:checked + span{
				font-size: 20px;
			}
		</style>
		
		<!--相邻选择器-->
		<label>
			<input type="checkbox" name="" id="" value="" />
			<span>文字变大</span>
		</label>
		
		<!--兄弟选择器-->
		<style type="text/css">
			p
		</style>
		
		<p>我是第1个p标签</p>
		<p>我是第2个p标签</p>
		<p>我是第3个p标签</p>
		<p>我是第4个p标签</p>
		<p>我是第5个p标签</p>
	</body>
</html>
